<html>

<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width,initial-scale=1.0" />
	<script src="https://unpkg.com/vue@3"></script>
	<!-- import CSS -->
	<link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css">
	<!-- import JavaScript -->
	<script src="https://unpkg.com/element-plus"></script>
	<!-- axios -->
	<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
	<title>vue 3.0 demo</title>
</head>

<body>
	<div id="app" align="center">
		<el-table @cell-click="click" :data="tableData" border stripe style="width: 60%">
			<el-table-column type="index" label="No." align="center" width="60"></el-table-column>
			<el-table-column prop="userName" label="用户名" align="center" width="180"></el-table-column>
			<el-table-column prop="age" label="年龄" align="center" width="180"></el-table-column>
			<el-table-column prop="desc" label="描述" align="center"></el-table-column>
			<el-table-column prop="createTime" label="创建时间" align="center"></el-table-column>
			<el-table-column label="Link" width="180" align="center">
				<template #default="scope">
					<el-button @click.stop="openLink(scope.row)" size="small" type="success"> Open Link </el-button>
				</template>
			</el-table-column>
		</el-table>
	</div>
	<script>
		const App = {
			data() {
				return {
					tableData: []
				};
			},
			mounted() {
				axios.get('https://git.00fly.online/rest/users?pageNo=0')
					.then(response => (this.tableData = response.data.data.content))
					.catch(function (error) { // 请求失败处理
						console.log(error);
					});
			},
			methods: {
				openLink(row) {
					console.log("openLink for " + row.userName);
				},
				click(row) {
					console.log("click:" + row.userName);
				}
			}
		};
		const app = Vue.createApp(App);
		app.use(ElementPlus);
		app.mount("#app");
	</script>
</body>